<template>
  <div class="CheckHospital">
    <!-- 面包屑-- -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/clinicActivity' }"
        >患教活动管理</el-breadcrumb-item
      >
    </el-breadcrumb>
    <!-- 医院的基本信息 -->
    <div class="HospitalMessage">
      <h2 class="biaoti">患教活动信息</h2>
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
          ><div class="grid-content bg-purple"></div
        ></el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
          ><div class="grid-content bg-purple-light">活动主题：</div></el-col
        >
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
          ><div class="grid-content bg-purple">主持人：</div></el-col
        >
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
          ><div class="grid-content bg-purple-light"></div
        ></el-col>
      </el-row>
      <br />
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
          ><div class="grid-content bg-purple"></div
        ></el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
          ><div class="grid-content bg-purple-light">目标人数:</div></el-col
        >
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
          ><div class="grid-content bg-purple">直播时间：</div></el-col
        >
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
          ><div class="grid-content bg-purple-light"></div
        ></el-col>
      </el-row>
      <br />
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
          ><div class="grid-content bg-purple"></div
        ></el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
          ><div class="grid-content bg-purple-light">
            报名开始时间：
          </div></el-col
        >
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
          ><div class="grid-content bg-purple">报名开始时间：</div></el-col
        >
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
          ><div class="grid-content bg-purple-light"></div
        ></el-col>
      </el-row>
      <br />
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
          ><div class="grid-content bg-purple"></div
        ></el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
          ><div class="grid-content bg-purple-light">
            患教持续时间：
          </div></el-col
        >
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
          ><div class="grid-content bg-purple">患教费用：</div></el-col
        >
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
          ><div class="grid-content bg-purple-light"></div
        ></el-col>
      </el-row>
      <br />
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
          ><div class="grid-content bg-purple"></div
        ></el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
          ><div class="grid-content bg-purple-light">患教说明：</div></el-col
        >
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
          ><div class="grid-content bg-purple"></div
        ></el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
          ><div class="grid-content bg-purple-light"></div
        ></el-col>
      </el-row>
    </div>
    <!-- 科室信息列表 -->
    <div class="HospitalList">
      <div class="content">
        <h2>诊疗活动报名信息</h2>
      </div>

      <template>
        <div>
          <el-table :data="DoctorList" style="width: 100%">
            <el-table-column label="姓名" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 1%">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="性别" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 1px">{{ scope.row.sex }}</span>
              </template>
            </el-table-column>
            <el-table-column label="病龄" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 1px">{{ scope.row.count }}</span>
              </template>
            </el-table-column>
            <el-table-column label="报名时间" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.statime }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <!--    页码-->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "CheckClinicActivityList",

  data() {
    return {
      DoctorList: [
        {
          name: "王小虎",
          sex: "男",
          count: "5年",
          statime: "2016-05-04",
        },
        {
          name: "王小虎",
          sex: "男",
          count: "5年",
          statime: "2016-05-04",
        },
        {
          name: "王小虎",
          sex: "男",
          count: "5年",
          statime: "2016-05-04",
        },
        {
          name: "王小虎",
          sex: "男",
          count: "5年",
          statime: "2016-05-04",
        },
      ],
    };
  },
};
</script>

<style>
.biaoti {
  text-align: center;
  margin-bottom: 30px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  margin-top: 3px;
}
.HospitalList {
  margin-top: 20px;
}
.back {
  margin-top: 10px;
}
.content {
  display: flex;
  flex-direction: row;
  padding-left: 46%;
  justify-content: space-between;
}
.myform {
  text-align: center;
  border: 1px solid red;
}
</style>
